import Paging from '@/components/Paging';
import RightButton from '@/components/RightButton';
import Layout from '@/Layout';
import { deleteArticle, queryArticles } from '@/services/creationCenter';
import {
  ArticleDetail,
  FilterArticleCondition,
  QueryArticleCondition,
} from '@/services/creationCenter/typing';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Empty, message, Modal, Spin } from 'antd';
import { useEffect, useState } from 'react';
import FilterArticle from '../components/FilterArticle';
import ArticleItem from './ArticleItem';
import styles from './index.module.scss';

const { confirm } = Modal;

let queryCondition: QueryArticleCondition = {
  page: 1,
  pageSize: 10,
  keywords: '',
  type: 1,
};

const ArticleList: React.FC = () => {
  const [articleList, setArticleList] = useState<ArticleDetail[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);

  function getKeyword(keywords: string) {
    queryCondition.keywords = keywords;
    getArticles(queryCondition);
  }

  function getFilterCondition(filterCondition: FilterArticleCondition) {
    getArticles({
      ...queryCondition,
      ...filterCondition,
    });
  }

  async function getArticles(condition: QueryArticleCondition) {
    setLoading(true);
    const { data } = await queryArticles(condition);
    setArticleList(data.list);
    setTotal(data.total);
    setLoading(false);
  }

  const pageChange = (pageNumber: number) => {
    queryCondition.page = pageNumber;
    getArticles(queryCondition);
  };

  useEffect(() => {
    getArticles(queryCondition);
  }, []);

  const clickDel = (articleId: number) => {
    confirm({
      title: '警告！！！',
      icon: <ExclamationCircleFilled />,
      content: '一旦删除将无法找回，确定删除吗？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      async onOk() {
        const res = await deleteArticle(articleId);
        message.success(res.msg);
        getArticles(queryCondition);
      },
    });
  };

  return (
    <>
      <Layout>
        <FilterArticle
          isSelectOriginal={false}
          getKeyword={getKeyword}
          getFilterCondition={getFilterCondition}
        ></FilterArticle>

        <div className={styles.container}>
          {total === 0 ? (
            <div className={styles.state}>
              <Empty />
            </div>
          ) : loading ? (
            <div className={styles.state}>
              <Spin size="large" />
            </div>
          ) : (
            <div>
              {articleList.map((article) => (
                <RightButton
                  key={article.article_id}
                  articleId={article.article_id}
                  clickDel={clickDel}
                >
                  <div>
                    <ArticleItem articleDetail={article} />
                  </div>
                </RightButton>
              ))}
              <Paging total={total} pageChange={pageChange}></Paging>
            </div>
          )}
        </div>
      </Layout>
    </>
  );
};

export default ArticleList;
